<template>
<!--  安徽省地图-->
  <div >
    <div class="main_demo">
      <div v-for="(item,index) in mapName" :key="index"  >
        <div class="demo_main">
          <el-button>{{item.properties.name}}</el-button>
        </div>
      </div>
    </div>


    <div class="box">
      <div class="banner_top">
        <el-button type="primary" disabled>服务窗口</el-button>
      </div>
      <div ref="main" class="main"></div>
    </div>

  </div>
</template>

<script>
  import JSON from "../../until/anhui"
    export default {
        name: "anhui",
      data(){
          return{
            /*
            地图上面的名字
             */
            mapName:'',
            option :{
              series: [
                {
                  type: 'map',
                  mapType: '安徽省',//地图名称
                  symbolSize:20,
                  itemStyle: {
                    normal: {
                      borderWidth: 0.5, // 区域边框宽度
                      borderColor: '#FEFEFE', // 区域边框颜色
                      areaColor: '#97D6F5' // 区域颜色
                    },
                    emphasis: {
                      borderWidth: 0.5,
                      borderColor: '#4b0082',
                      areaColor: '#ffdead'
                    }
                  },
                  label: {
                    show: true,
                    color: "#344D52",
                    fontSize: 15,
                    borderRadius:5,
                    // backgroundColor: "#1295E0",
                    padding:5,
                  },
                  data: [
                    // {
                    //   name: "合肥市",
                    //   value:"合肥市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                    // {
                    //   name: "芜湖市",
                    //   value:"芜湖市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                    // {
                    //   name: "蚌埠市",
                    //   value:"蚌埠市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                    // {
                    //   name: "淮南市",
                    //   value:"淮南市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                    // {
                    //   name: "马鞍山市",
                    //   value:"马鞍山市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                    // {
                    //   name: "淮北市",
                    //   value:"淮北市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                    // {
                    //   name: "铜陵市",
                    //   value:"铜陵市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                    // {
                    //   name: "安庆市",
                    //   value:"安庆市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                    // {
                    //   name: "黄山市",
                    //   value:"黄山市",
                    //   label: {
                    //     position: "right"
                    //   },
                    //   symbol:'none'
                    // },
                  ]
                }
              ]
            }
          }
      },
      methods:{
        getList(){
          let myChart = this.$echarts.init(this.$refs.main) // 拿到一个实例
          this.$echarts.registerMap('安徽省', JSON, {})//引入地图文件
          console.log(JSON.features)
          this.mapName =JSON.features
          myChart.setOption(this.option)
        }
      },
      created(){

      },
      mounted(){
        this.getList()
      },
    }
</script>

<style scoped>
  .demo_main{
    margin-top: 15px;
    display: flex;
    justify-content: center;

  }

  .banner_top{
    position: absolute;
    top: 95px;
    left: 552px;
    font-size: 20px;
  }
  canvas{
    margin-top: 30px;
  }
  .main{
    width: 1000px;
    margin-left: 100px;
    margin-top: 50px;
    height: 1000px;
    position: absolute;
    top: 0;
    border: 1px solid #2c3e50;
  }
  .main_demo{
    /*margin-left: 1200px;*/
    float: left;
    position: fixed;
    top: 0;
    left: 1200px;
    margin-top:60px;
    height: 50px;
    line-height: 50px;
  }
</style>
